<!DOCTYPE html>
<html>
<head>
    <#include "/header.html">
    <style>
        .el-form-item {
            margin-bottom: 10px;
        }

        .order {
            border: 1px solid #dcdfe6;
            margin-bottom: 15px;
            padding-left: 10px;
            border-radius: 10px;
        }

        .order-wrapper {
            height: 35px;
            line-height: 35px;
        }

        .order-wrapper span {
            color: #333;
            font-size: 14px;
        }

        .order-wrapper span:nth-child(1) {
            font-weight: bold;
        }

        #dept-management p {
            padding: 0px;
            margin: 5px 0px;
        }

        #dept-management input {
            border-color: transparent;
        }

        #dept-management .el-form-item {
            margin-bottom: 0px;
        }

        #dept-management .el-dialog__body {
            padding: 0px 20px;
        }

        #dept-management .el-form-item__label {
            font-weight: bold;
            height: 24px;
            line-height: 24px;
        }

        /* #dept-management .el-dialog__footer {
           text-align: center;
        } */
        /* #dept-management .el-dialog__headerbtn {
           display: none;
      } */
        #dept-management .is-fullscreen {
            height: auto;
            margin-top: 10%;
            width: 600px;
        }

        #dept-management .el-form-item {
            height: 24px;
            line-height: 24px;
        }

        #dept-management .el-form-item__content {
            height: 24px;
            line-height: 24px;
        }

        #dept-management .el-input__inner {
            height: 24px;
            line-height: 24px;
        }

        el-tree {
            min-width: 100%;
            font-size: 14px;
            display: inline-block;;
        }

        .tree {
            overflow-y: scroll;
            overflow-x: auto;
            height: 200px;
            width: 200px;
        }
    </style>
</head>
<body>
<div v-cloak class="aui-wrapper aui-page__iframe">
    <div class="aui-content__wrapper">
        <div class="aui-content">
            <el-card shadow="never" class="aui-card--fill">
                <div class="mod-sys__dept">
                    <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                        <el-form-item prop="name" class="dept-list" clearable size="medium">
                            <el-popover v-model="deptListVisible" ref="deptListPopover" placement="bottom-start"
                                        trigger="click">
                                <div class='tree'>
                                    <el-tree
                                            :data="deptList"
                                            :props="{ label: 'name', children: 'children' }"
                                            node-key="id"
                                            ref="deptListTree"
                                            :highlight-current="true"
                                            :expand-on-click-node="false"
                                            accordion
                                            @current-change="deptListTreeCurrentChangeHandle">
                                    </el-tree>
                                </div>
                                <el-input slot="reference" v-model="dataForm.name" v-popover:deptListPopover clearable
                                          @clear="clear" :placeholder="$t('dept.name')"></el-input>
                            </el-popover>
                        </el-form-item>
                        <el-form-item>
                            <el-input v-model="dataForm.mobile" :placeholder="$t('dept.mobile')" clearable
                                      size="medium"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button @click="getDataList()" size="medium" type="primary">查询</el-button>
                        </el-form-item>
                        <el-form-item>
                            <el-button v-if="$hasPermission('sys:dept:save')" type="primary"
                                       @click="addOrUpdateHandle()" size="medium">{{ $t('add') }}
                            </el-button>
                        </el-form-item>
                    </el-form>
                    <el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;" size="small">
                        <table-tree-column prop="name" :label="$t('dept.name')" header-align="center" align="center">>
                        </table-tree-column>
                        <el-table-column prop="parentName" :label="$t('dept.parentName')" header-align="center"
                                         align="center"></el-table-column>
                        <el-table-column prop="sort" :label="$t('dept.sort')" header-align="center"
                                         align="center"></el-table-column>
                        <el-table-column :label="$t('handle')" fixed="right" header-align="center" align="center"
                                         width="280">
                            <template slot-scope="scope">
                                <el-button v-if="$hasPermission('sys:dept:update')" type="text" size="mini"
                                           @click="addOrUpdateHandle(scope.row.id)">{{ $t('update') }}
                                </el-button>
                                <el-button v-if="$hasPermission('sys:dept:delete')" type="text" size="mini"
                                           @click="deleteHandle(scope.row.id)">{{ $t('delete') }}
                                </el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination
                            :current-page="page"
                            :page-sizes="[15, 30, 50, 100]"
                            :page-size="limit"
                            :total="total"
                            layout="total, sizes, prev, pager, next, jumper"
                            @size-change="pageSizeChangeHandle"
                            @current-change="pageCurrentChangeHandle">
                    </el-pagination>
                    <!-- 弹窗, 新增 / 修改 -->
                    <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate"
                                   @refresh-data-list="getDataList"></add-or-update>
                    <add-or-recharge v-if="addOrRechargeVisible" ref="addOrRecharge"
                                     @refresh-data-list="getDataList"></add-or-recharge>
                    <add-view v-if="addViewVisible" ref="addView"></add-view>
                </div>
            </el-card>
        </div>
    </div>
</div>
<#include "/footer.html">
<script src="${request.contextPath}/statics/js/modules/sys/dept.js"></script>
</body>
</html>
